import React from "react";
import frame from '../../../style/frame.less';
import timg3 from '../../../images/cloud/timg3.png'
import timg2 from '../../../images/cloud/timg2.png'
import timg1 from '../../../images/cloud/timg1.png'
import timg4 from '../../../images/cloud/timg4.png'
import timg5 from '../../../images/cloud/timg5.png'
import timg6 from '../../../images/cloud/timg6.png'
import Trial from '../trial'

class PagePart extends React.Component {

    constructor(props) {
        super(props);
    }

    componentDidMount() {

    }

    render() {
        return (
            <div>
                <div className={`${frame.component} ${frame.solutionContent}`}>
                    <div className={frame.solutionContentTitle}>
                        了解我们的产品
                    </div>
                    <div className={frame.solutionContentSubTitle}>
                        <p>****Cloud为您提供性能卓越、安全可靠、按需、实时的ICT资源与管理服务。</p>
                    </div>
                </div>

                <div className={`${frame.component} ${frame.middleContent}`}>
                    <div className={frame.contentSubject}>
                        <div className={frame.solution}>
                            <div>
                                <div className={frame.fade}>
                                    <div>
                                        <img src={timg1} alt="" />
                                    </div>
                                    <div className={frame.solutionTitle}>
                                         计算<span>Cloud Computing</span>
                                    </div>
                                    <div className={frame.solutionDivider}></div>
                                    <div className={frame.solutionDesc}>
                                        <label for="0">了解详情</label>
                                        <input type="checkbox" id="0" />
                                        <label for="0" className={frame.solutionDescContent}>
                                            <div> 计算</div>
                                            <div>****Cloud为您提供可靠的计算资源，以期达到最优的计算资源配置。</div>
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <div>
                                <div className={frame.fade}>
                                    <div>
                                        <img src={timg2} alt="" />
                                    </div>
                                    <div className={frame.solutionTitle}>
                                         存储<span>Cloud Storage</span>
                                    </div>
                                    <div className={frame.solutionDivider}></div>
                                    <div className={frame.solutionDesc}>
                                        <label htmlFor="1">了解详情</label>
                                        <input type="checkbox" id="1" />
                                        <label htmlFor="1" className={frame.solutionDescContent}>
                                            <div> 存储</div>
                                            <div>****Cloud为您提供高IOPS、高吞吐量、低延迟的 存储服务。</div>
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <div>
                                <div className={frame.fade}>
                                    <div>
                                        <img src={timg3} alt="" />
                                    </div>
                                    <div className={frame.solutionTitle}>
                                        超融合网络<span>Hyper-Converged Network</span>
                                    </div>
                                    <div className={frame.solutionDivider}></div>
                                    <div className={frame.solutionDesc}>
                                        <label htmlFor="2">了解详情</label>
                                        <input type="checkbox" id="2" />
                                        <label htmlFor="2" className={frame.solutionDescContent}>
                                            <div>超融合网络</div>
                                            <div>****Cloud为您提供VPC、弹性负载均衡、NAT等丰富的超融合网络服务。</div>
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <div>
                                <div className={frame.fade}>
                                    <div>
                                        <img src={timg4} alt="" />
                                    </div>
                                    <div className={frame.solutionTitle}>
                                        中间件<span>Middleware</span>
                                    </div>
                                    <div className={frame.solutionDivider}></div>
                                    <div className={frame.solutionDesc}>
                                        <label htmlFor="3">了解详情</label>
                                        <input type="checkbox" id="3" />
                                        <label htmlFor="3" className={frame.solutionDescContent}>
                                            <div>中间件</div>
                                            <div>****Cloud为您提供服务注册发现、RPC、消息队列等中间件服务。</div>
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <div>
                                <div className={frame.fade}>
                                    <div>
                                        <img src={timg5} alt="" />
                                    </div>
                                    <div className={frame.solutionTitle}>
                                        安全<span>Security</span>
                                    </div>
                                    <div className={frame.solutionDivider}></div>
                                    <div className={frame.solutionDesc}>
                                        <label htmlFor="4">了解详情</label>
                                        <input type="checkbox" id="4" />
                                        <label htmlFor="4" className={frame.solutionDescContent}>
                                            <div>安全</div>
                                            <div>****Cloud为您提供完整的 计算安全框架，为您的数据安全保驾护航。</div>
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <div>
                                <div className={frame.fade}>
                                    <div>
                                        <img src={timg6} alt="" />
                                    </div>
                                    <div className={frame.solutionTitle}>
                                         桌面服务<span>Cloud Desktop Service</span>
                                    </div>
                                    <div className={frame.solutionDivider}></div>
                                    <div className={frame.solutionDesc}>
                                        <label htmlFor="5">了解详情</label>
                                        <input type="checkbox" id="5" />
                                        <label htmlFor="5" className={frame.solutionDescContent}>
                                            <div> 桌面服务</div>
                                            <div>****Cloud为您提供 桌面服务，实现 平台的快速交付。</div>
                                        </label>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>

                <Trial />
            </div>
        )
    }

/*
    render() {
        return (
            <div className={`${frame.component} ${frame.largeContent}`}>
                <div className={frame.contentTitle}>
                    了解我们的产品
                </div>
                <div className={frame.contentDivider}></div>
                <div className={frame.contentSubTitle}>
                    ****Cloud为您提供性能卓越、安全可靠、按需、实时的ICT资源与管理服务
                </div>
                <div className={frame.contentSubject}>
                    <div className={frame.product}>
                        <div>
                            <div className={`${frame.fade} ${frame.p1}`}>
                                <div>
                                    <img src={timg3} alt="" />
                                </div>
                                <div className={frame.productCode}>Computing</div>
                                <div className={frame.productName}>计算</div>
                            </div>
                        </div>
                        <div>
                            <div className={`${frame.fade} ${frame.p2}`}>
                                <div>
                                    <img src={timg2} alt="" />
                                </div>
                                <div className={frame.productCode}>Storage</div>
                                <div className={frame.productName}>存储</div>
                            </div>
                        </div>
                        <div>
                            <div className={`${frame.fade} ${frame.p3}`}>
                                <div>
                                    <img src={timg1} alt="" />
                                </div>
                                <div className={frame.productCode}>Network</div>
                                <div className={frame.productName}>网络</div>
                            </div>
                        </div>
                        <div>
                            <div className={`${frame.fade} ${frame.p4}`}>
                                <div>
                                    <img src={timg4} alt="" />
                                </div>
                                <div className={frame.productCode}>Middleware</div>
                                <div className={frame.productName}>中间件</div>
                            </div>
                        </div>
                        <div>
                            <div className={`${frame.fade} ${frame.p5}`}>
                                <div>
                                    <img src={timg5} alt="" />
                                </div>
                                <div className={frame.productCode}>Safe</div>
                                <div className={frame.productName}>安全</div>
                            </div>
                        </div>
                        <div>
                            <div className={`${frame.fade} ${frame.p6}`}>
                                <div>
                                    <img src={timg6} alt="" />
                                </div>
                                <div className={frame.productCode}>Cloud Desktop Service</div>
                                <div className={frame.productName}>桌面 服务</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        )
    }*/
}

export default PagePart
